<template>
  <pre style="padding-left: 0">   
      <code class="language-Markup  line-numbers">
        <strong>计算属性 (computed) </strong>
        地址：https://cn.vuejs.org/guide/essentials/computed.html

        &lt;script&gt; setup&gt;
        import { reactive, computed } from 'vue'

        const author = reactive({
        name: 'John Doe',
        books: [
            'Vue 2 - Advanced Guide',
            'Vue 3 - Basic Guide',
            'Vue 4 - The Mystery'
        ]
        })

        // 一个计算属性 ref
        const publishedBooksMessage = computed(() =&gt; {
        return author.books.length &gt; 0 ? 'Yes' : 'No'
        })
        &lt;/script&gt;

        &lt;template&gt;
        &lt;p&gt;Has published books:&lt;/p&gt;
        &lt;span&gt; &#123;&#123; publishedBooksMessage &#125;&#125;&lt;/span&gt;
        &lt;/template&gt;


        <strong>侦听器 (watch)</strong>
        默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
        地址：https://cn.vuejs.org/api/reactivity-core.html#watch
        第一个参数是侦听器的源。这个来源可以是以下几种：
            1、一个函数，返回一个值
            const state = reactive({ count: 0 })
            watch(
            () => state.count,
            (count, prevCount) => {
                /* ... */
            }
            )

            2、一个 ref
            const count = ref(0)
            watch(count, (count, prevCount) => {
            /* ... */
            })
  
            3、一个响应式对象
            const state = reactive({ count: 0 })
            watch(
            () => state,
            (newValue, oldValue) => {
                // newValue === oldValue
            },
            { deep: true }
            )

            4、...或是由以上类型的值组成的数组
            watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
            /* ... */
            })

        第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值；
        第三个可选的参数是一个对象，支持以下这些选项：
            immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
            deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。
            flush：调整回调函数的刷新时机。
            onTrack / onTrigger：调试侦听器的依赖。

      </code>
    </pre>
  <strong> 侦听器 </strong>
  <el-row>
    <el-col :span="24">
      <el-form   :style="{ width: '600px' }">
        <el-form-item
          field="watchStudent"
          tooltip="请输入需要观察的数据"
          label="单个变化"
        >
          <el-input
            v-model="watchStudent"
            placeholder="请输入。。。。"
          />
          {{ watchStudent }}
        </el-form-item> 
      </el-form>
    </el-col>
  </el-row>
</template>
  <script lang="ts" setup>
import { ref,  watch,onMounted } from "vue";
import Prism from "prismjs"; 
onMounted(()=>{
    Prism.highlightAll();
  })

//属性
const watchStudent = ref("");
watch(watchStudent, (newvalue ,oldvalue) => {

    alert(`原来的值是:${oldvalue} 新的值是:${newvalue}`)
});
</script>